/* 
 * 拖动滑块
 */
define(['jquery','css!./drag.css'],function($){
    var os = function () {
        var osData = {};
        var sUserAgent = navigator.userAgent;
        var isWin = (navigator.platform === "Win32") || (navigator.platform === "Windows");
        var isMac = (navigator.platform === "Mac68K") || (navigator.platform === "MacPPC") || (navigator.platform === "Macintosh") || (navigator.platform === "MacIntel");
        if (isMac) {
            osData.os = 'macOS';
        }
        var isUnix = (navigator.platform === "X11") && !isWin && !isMac;
        if (isUnix) {
            osData.os = 'Unix';
        }
        var isLinux = (String(navigator.platform).indexOf("Linux") > -1);
        if (isLinux) {
            osData.os = 'Linux';
        }
        if (isWin) {
            var isWin2K = sUserAgent.indexOf("Windows NT 5.0") > -1 || sUserAgent.indexOf("Windows 2000") > -1;
            if (isWin2K) {
                osData.os = 'Win2000';
            }
            var isWinXP = sUserAgent.indexOf("Windows NT 5.1") > -1 || sUserAgent.indexOf("Windows XP") > -1;
            if (isWinXP) {
                osData.os = 'WinXP';
            }
            var isWin2003 = sUserAgent.indexOf("Windows NT 5.2") > -1 || sUserAgent.indexOf("Windows 2003") > -1;
            if (isWin2003) {
                osData.os = 'Win2003';
            }
            var isWinVista = sUserAgent.indexOf("Windows NT 6.0") > -1 || sUserAgent.indexOf("Windows Vista") > -1;
            if (isWinVista) {
                osData.os = 'WinVista';
            }
            var isWin7 = sUserAgent.indexOf("Windows NT 6.1") > -1 || sUserAgent.indexOf("Windows 7") > -1;
            if (isWin7) {
                osData.os = 'Win7';
            }
            var isWin8 = sUserAgent.indexOf("Windows NT 8.1") > -1 || sUserAgent.indexOf("Windows 8") > -1;
            if (isWin8) {
                osData.os = 'Win8';
            }
            var isWin10 = sUserAgent.indexOf("Windows NT 10.0") > -1 || sUserAgent.indexOf("Windows 10") > -1;
            if (isWin10) {
                osData.os = 'Win10';
            }
        }
        if (sUserAgent.indexOf('Android') > -1 || sUserAgent.indexOf('Linux') > -1) {//安卓手机
            osData.os = 'Android';
        } else if (sUserAgent.indexOf('iPhone') > -1) {//苹果手机
            osData.os = 'iOS';
        } else if (sUserAgent.indexOf('Windows Phone') > -1) {//winphone手机
            osData.os = 'winPhone';
        }
        //其他异形浏览器
        if(!osData.os) osData.os = 'else';
        return osData;
    };
    $.fn.dragValidate = function(options){
        var x, drag = this, isMove = false, defaults = {
        };

        var handler,drag_bg,text,maxWidth;

        // this.api = {
        //     'reset':function(){
        //         drag.find('.handler').css({'left': 0});
        //         drag.find('.drag_bg').css({'width': 0});
        //         drag.find('.handler').removeClass('handler_ok_bg').addClass('handler_bg');
        //         drag.find('.drag_text').text('拖动滑块验证');
        //     }
        // };
        // if(options && typeof(options) == 'string'){
        //     this.api[options] ? this.api[options].call(this) : '';
        //     return
        // }
        var options = $.extend(defaults, options);

        this.addClass("_dragWrap");
        //添加背景，文字，滑块
        var html = '<div class="drag_bg"></div>'+
                    '<div class="drag_text" onselectstart="return false;" unselectable="on">拖动滑块验证</div>'+
                    '<div class="handler handler_bg"></div>';
        this.append(html);


        handler = drag.find('.handler');
        drag_bg = drag.find('.drag_bg');
        text = drag.find('.drag_text');
        maxWidth = drag.width() - handler.width();  //能滑动的最大间距

        //清空事件
        var dragOk = function (){
            handler.removeClass('handler_bg').addClass('handler_ok_bg');
            text.text('验证通过');
            drag.css({'color': '#fff'});
            handler.unbind('mousedown');
            $(document).unbind('mousemove');
            $(document).unbind('mouseup');
            options.done?options.done.call(drag):null
        };

        //鼠标按下时候的x轴的位置
        var events = ['mousedown','mousemove','mouseup'];
        if(os().os.search(/(ios)|(android)|(winphone)/ig) > -1){
            events = ['touchstart','touchmove','touchend'];
        }
        handler.on(events[0], function(e){
            isMove = true;
            var pageX = e.pageX || e.originalEvent.changedTouches[0].clientX;
            x = pageX - parseInt(handler.css('left'), 10);
            // x = handler.position().left;
        });

        //鼠标指针在上下文移动时，移动距离大于0小于最大间距，滑块x轴位置等于鼠标移动距离
        $(document).on(events[1], function(e){
            var pageX = e.pageX || e.originalEvent.changedTouches[0].clientX;
            var _x = pageX - x;
            if(isMove){
                if(_x > 0 && _x <= maxWidth){
                    handler.css({'left': _x});
                    drag_bg.css({'width': _x});
                }else if(_x > maxWidth){  //鼠标指针移动距离达到最大时清空事件
                    handler.css({'left': maxWidth});
                    drag_bg.css({'width': maxWidth});
                    dragOk();
                }
            }
        }).on(events[2], function(e){
            isMove = false;
            var pageX = e.pageX || e.originalEvent.changedTouches[0].clientX;
            var _x = pageX - x;
            if(_x < maxWidth){ //鼠标松开时，如果没有达到最大距离位置，滑块就返回初始位置
                handler.css({'left': 0});
                drag_bg.css({'width': 0});
            }
        });

    };
});


